<template>
	<u-modal :show="show" :negativeTop="200" title="退菜" confirmText="确定" showCancelButton confirmColor="#FD8906"
		cancelColor="#000" @confirm="save" @cancel="show = false" @close="show = false" zoom>
		<view class="f-1 w100 f14">
			<block v-if="mode=='single'">
				<view class="flex p-10-0">
					<view class="mr10 left c9">商品</view>
					<view>{{form.name || form.goods && form.goods.name}}</view>
				</view>
				<view class="flex p-10-0">
					<view class="mr10 left c9">数量</view>
					<view class="flex f-y-c">
						<view class="jh f-c jhb" @tap.stop="min"  v-if="value >1 && value<=form.num">
							<text class='iconfont icon-jianhao f26 nowei c0'></text>
						</view>
						<!-- <text class='iconfont icon-jjian- f40 cd nowei' @tap.stop="min"  v-if="value >1 && value<=form.num"></text> -->
						<view class="number f16">{{value}}</view>
						<!-- <text class='iconfont icon-tianjiagouwuche f42 nowei' :style="{color:subColor}" v-if="value<form.num"	
							@tap.stop="add"></text> -->
						<view class="jh f-c" :style="{background:subColor}" @tap.stop="add"  v-if="value<form.num">
							<text class='iconfont icon-jiahao1 f26 nowei'></text>
						</view>
					</view>
				</view>
			</block>
			<view class="p-10-0">
				<view class="mr10 left c9"><text class="crb">*</text>原因</view>
				<view class="flex mt10">
					<view class="f-g-1">
						<text v-for="(v,i) in kjsr" :key="i" class="kj c3 f12" @click="kjcx(v)">{{v}}</text>
					</view>
				</view>
				<view class="f-g-1 mt20">
					<u--textarea placeholder="请输入原因" :customStyl="{background:'#f3f3f3'}" v-model="reason">
					</u--textarea>
				</view>
			</view>
			<view class="flex p-10-0">
				<view class="mr10 left c9"></view>
				<view class="f-g-1">
					
				</view>
			</view>
		</view>
	</u-modal>
</template>

<script>
	export default {
		components: {

		},
		props: {
			mode:{
				type: String,
				default: () => 'single'
			},
			v: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				reason: '',
				kjsr:['上菜慢','不想要了','客户投诉质量问题'],
				form: {},
				value:1,
				show: false,
			}
		},
		methods: {
			open(v) {
				if(v){
					this.form = v
					this.value = this.form.num
				}
				this.show = true
			},
			close() {
				this.show = false
			},
			add(){
				this.value += 1 
			},
			min(){
				this.value -= 1 
			},
			kjcx(v){
				this.reason = v
			},
			async save() {
				if(!this.reason){
					return uni.showToast({
						title: '请输入原因',
						icon: 'none'
					})
				}
				if(this.mode=='single'){
					let { data , msg } = await this.beg.request({
						url: this.v.orderSn ? `${this.api.giveOrder}/${this.v.orderSn}` : this.api.give,
						method:'POST',
						data: {
							goods:[
								{
									id: this.form.id,
									num: this.value
								}
							],
							type:'backFood',
							reason: this.reason,
							diningType: this.v.diningType,
							storeId: this.v.storeId,
							tableId: this.v.tableId,
						}
					})
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					this.show = false
					this.reason = ''
					this.$emit('save',this.v && this.v.orderSn)
				}else{
					this.$emit('save',this.reason)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.left {
		width: 100rpx;
		text-align: left;
	}

	.f40 {
		font-size: 40rpx;
	}

	.f42 {
		font-size: 42rpx;
	}

	.number {
		text-align: center;
		width: 80rpx;
	}
	
	.kj{
		border: 2rpx solid #e7e7e7;
		margin-right: 10rpx;
		padding: 6rpx;
		border-radius: 4rpx;
	}
</style>